<template>
  <a-spin :spinning="loading">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="{span:8}"
      :wrapper-col="{span:16}">
      <a-row>
        <a-col :span="12">
          <a-form-item label="软件ID" name="id">
            <a-input v-model:value="formState.id" :disabled="type === 1? false: true" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="软件名称" name="name">
            <a-input v-model:value="formState.name" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属项目" name="projectId">
            <a-select v-model:value="formState.projectId">
              <a-select-option
                v-for="item in projectOptions"
                :key="item.value"
                :value="item.value">
                {{item.title}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="当前状态" name="status">
            <a-input v-model:value="formState.status" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="服务器配置" name="disabled">
            <a-radio-group v-model:value="formState.disabled">
              <a-radio-button value="0">有</a-radio-button>
              <a-radio-button value="1">无</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="软件版本" name="version">
            <a-input v-model:value="formState.version" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="服务器地址" :name="formState.disabled*1 === 1 ? '' : 'ip'">
            <a-input v-model:value="formState.ip" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="服务器端口" :name="formState.disabled*1 === 1 ? '' : 'port'">
            <a-input v-model:value="formState.port" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-item label="用户注册地址">
            <a-input v-model:value="formState.registrationAddress" />
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-item label="基础用户账号">
            <a-input v-model:value="formState.baseUserId" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="基础用户密码">
            <a-input v-model:value="formState.baseUserPsd" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" :label-col="{span:4}" :wrapper-col="{span:20}">
            <a-textarea v-model:value="formState.remark" :auto-size="{ minRows: 2, maxRows: 5 }" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
export default {
  props: {
    loading: {
      type: Boolean,
      required: true
    },
    type: {
      type: Number,
      required: true
    },
    softRow: {
      type: Object
    },
    softIds: {
      type: Array,
      required: true
    }
  },
  setup (props, context) {
    const store = useStore()
    const projectOptions = store.state.projectOptions
    const formRef = ref()
    const formState = reactive({
      projectId: '',
      id: '',
      name: '',
      status: '',
      disabled: '0',
      version: '',
      ip: '',
      port: '',
      baseUserId: '',
      baseUserPsd: '',
      remark: ''
    })
    const rules = {
      projectId: [
        { required: true, message: '请选择项目', trigger: ['blur', 'change'] }
      ],
      id: [
        { required: true, message: '请输入软件ID', trigger: 'blur' }
      ],
      name: [
        { required: true, message: '请输入软件名称', trigger: 'blur' }
      ],
      status: [
        { required: true, message: '请输入当前状态', trigger: 'blur' }
      ],
      version: [
        { required: true, message: '请输入软件版本', trigger: 'blur' }
      ],
      disabled: [
        { required: true, message: '请选择是否配置', trigger: ['blur'] }
      ],
      ip: [
        { required: true, message: '请输入服务器地址', trigger: 'blur' }
      ],
      port: [
        { required: true, message: '请输入服务器端口', trigger: 'blur' }
      ]
    }
    onMounted(() => {
      if (props.type * 1 === 1) {
        rules.id.push({ validator: checkSoftId, trigger: ['blur', 'change'] })
      }
      if (props.type * 1 === 3) {
        Object.keys(formState).forEach(key => {
          formState[key] = props.softRow[key]
        })
      }
    })
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          context.emit('handle-soft', formState)
        })
        .catch(error => {
          console.log(error)
        })
    }
    const checkSoftId = async (rule, value) => {
      if (props.softIds.indexOf(value) !== -1) {
        return Promise.reject(new Error('存在该软件ID'))
      }
    }
    return {
      projectOptions,
      formRef,
      formState,
      rules,
      onSubmit
    }
  }
}
</script>

<style lang='less' scoped>

</style>
